<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <base href="/oa1/"/>
    <title>编辑客户 - 襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="static/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet">
    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="static/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">编辑客户信息</h4>
    </div>
    <div class="panel-body">
        <form action="kh/customer/updateKhCustomer" id="myform" method="post" class="form-horizontal">
            <!-- 隐藏客户ID -->
            <input type="hidden" name="oid" value="${khCustomer.oid}">

            <!-- 客户基本信息（回显） -->
            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="customerName" class="col-md-4 control-label">客户名称<span class="text-danger">*</span></label>
                    <div class="col-md-8">
                        <input type="text" id="customerName" name="customerName" class="form-control"
                               value="${khCustomer.customerName}" placeholder="请输入客户名称">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="phone" class="col-md-4 control-label">客户电话<span class="text-danger">*</span></label>
                    <div class="col-md-8">
                        <input type="text" id="phone" name="phone" class="form-control"
                               value="${khCustomer.phone}" placeholder="请输入手机号或固定电话">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="vocation" class="col-md-4 control-label">所属行业</label>
                    <div class="col-md-8">
                        <select name="vocation" class="form-control" id="vocation">
                            <option value="">--请选择所属行业--</option>
                            <option value="1" ${khCustomer.vocation == 1 ? 'selected' : ''}>制造业</option>
                            <option value="2" ${khCustomer.vocation == 2 ? 'selected' : ''}>娱乐业</option>
                            <option value="3" ${khCustomer.vocation == 3 ? 'selected' : ''}>IT业</option>
                            <option value="4" ${khCustomer.vocation == 4 ? 'selected' : ''}>教育</option>
                            <option value="5" ${khCustomer.vocation == 5 ? 'selected' : ''}>外贸</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="companyType" class="col-md-4 control-label">公司性质</label>
                    <div class="col-md-8">
                        <select name="companyType" class="form-control" id="companyType">
                            <option value="">--请选择公司性质--</option>
                            <option value="1" ${khCustomer.companyType == 1 ? 'selected' : ''}>国有</option>
                            <option value="2" ${khCustomer.companyType == 2 ? 'selected' : ''}>外资</option>
                            <option value="3" ${khCustomer.companyType == 3 ? 'selected' : ''}>合资</option>
                            <option value="4" ${khCustomer.companyType == 4 ? 'selected' : ''}>私营</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="city" class="col-md-4 control-label">客户地区</label>
                    <div class="col-md-8">
                        <input type="text" id="city" name="city" class="form-control"
                               value="${khCustomer.city}" placeholder="请输入所在城市">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="address" class="col-md-4 control-label">客户地址</label>
                    <div class="col-md-8">
                        <input type="text" id="address" name="address" class="form-control"
                               value="${khCustomer.address}" placeholder="请输入详细地址">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="zipcode" class="col-md-4 control-label">邮政编码</label>
                    <div class="col-md-8">
                        <input type="text" id="zipcode" name="zipcode" class="form-control"
                               value="${khCustomer.zipcode}" placeholder="请输入6位邮政编码">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="fax" class="col-md-4 control-label">客户传真</label>
                    <div class="col-md-8">
                        <input type="text" id="fax" name="fax" class="form-control"
                               value="${khCustomer.fax}" placeholder="请输入固定电话格式传真">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="email" class="col-md-4 control-label">客户邮箱</label>
                    <div class="col-md-8">
                        <input type="text" id="email" name="email" class="form-control"
                               value="${khCustomer.email}" placeholder="请输入电子邮箱">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="url" class="col-md-4 control-label">单位网站</label>
                    <div class="col-md-8">
                        <input type="text" id="url" name="url" class="form-control"
                               value="${khCustomer.url}" placeholder="请输入网址（如https://xxx.com）">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="bank" class="col-md-4 control-label">开户行</label>
                    <div class="col-md-8">
                        <input type="text" id="bank" name="bank" class="form-control"
                               value="${khCustomer.bank}" placeholder="请输入开户银行">
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="account" class="col-md-4 control-label">银行账号</label>
                    <div class="col-md-8">
                        <input type="text" id="account" name="account" class="form-control"
                               value="${khCustomer.account}" placeholder="请输入银行账号">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="introduce" class="col-md-4 control-label">客户介绍</label>
                    <div class="col-md-8">
                        <textarea class="form-control" id="introduce" name="introduce" rows="5"
                                  placeholder="请输入客户简介">${khCustomer.introduce}</textarea>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="credit" class="col-md-4 control-label">客户信用</label>
                    <div class="col-md-8">
                        <select name="credit" class="form-control" id="credit">
                            <option value="">--请选择客户信用--</option>
                            <option value="1" ${khCustomer.credit == 1 ? 'selected' : ''}>良好</option>
                            <option value="2" ${khCustomer.credit == 2 ? 'selected' : ''}>一般</option>
                            <option value="3" ${khCustomer.credit == 3 ? 'selected' : ''}>较差</option>
                        </select>
                    </div>
                </div>
            </div>

            <hr class="col-md-12">

            <!-- 联系人信息（回显已有联系人） -->
            <div id="contactsContainer">
                <div class="col-md-12" id="contactsTitle"
                     style="${contacts != null && contacts.size() > 0 ? 'display:block' : 'display:none'}">
                    <h4 class="text-primary text-center">客户联系人信息</h4>
                    <hr>
                </div>
                <div id="contactsList">
                    <!-- 循环回显已有联系人 -->
                    <c:forEach items="${contacts}" var="contact" varStatus="status">
                        <div class="contact-item col-md-12">
                            <div class="form-group col-md-6">
                                <input type="hidden" name="coid" value="${contact.oid}">
                                <label class="col-md-4 control-label">联系人姓名<span
                                        class="text-danger">*</span></label>
                                <div class="col-md-8">
                                    <input type="text" name="contactName" class="form-control"
                                           value="${contact.contactName}" placeholder="请输入联系人姓名">
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-md-4 control-label">联系电话<span class="text-danger">*</span></label>
                                <div class="col-md-8">
                                    <input type="text" name="cphone" class="form-control"
                                           value="${contact.phone}" placeholder="请输入联系人电话">
                                </div>
                            </div>

                            <div class="form-group col-md-6">
                                <label class="col-md-4 control-label">职位</label>
                                <div class="col-md-8">
                                    <input type="text" name="job" class="form-control"
                                           value="${contact.job}" placeholder="请输入职位信息">
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-md-4 control-label">电子邮箱</label>
                                <div class="col-md-8">
                                    <input type="text" name="cemail" class="form-control"
                                           value="${contact.email}" placeholder="请输入邮箱">
                                </div>
                            </div>

                            <div class="form-group col-md-6">
                                <label class="col-md-4 control-label">联系地址</label>
                                <div class="col-md-8">
                                    <input type="text" name="caddress" class="form-control"
                                           value="${contact.address}" placeholder="请输入联系地址">
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="czipcode" class="col-md-4 control-label">联系人邮编</label>
                                <div class="col-md-8">
                                    <input type="text" name="czipcode" class="form-control" value="${contact.zipcode}"
                                           placeholder="请输入联系人邮编" id="czipcode">
                                </div>
                            </div>
                            <hr class="col-md-12">
                        </div>
                    </c:forEach>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="col-md-12">
                <div class="form-group col-md-12 text-center">
                    <a href="javascript:history.back()" class="btn btn-default">返回列表</a>
                    <button type="button" id="addContactBtn" class="btn btn-success">+ 添加联系人</button>
                    <button id="editapplybtn" type="submit" class="btn btn-primary">保存修改</button>
                    <button type="reset" class="btn btn-danger">重置表单</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 联系人模板（用于新增） -->
<div id="contactTemplate" style="display: none;">
    <div class="contact-item col-md-12">
        <div class="form-group col-md-6">
            <label class="col-md-4 control-label">联系人姓名<span class="text-danger">*</span></label>
            <div class="col-md-8">
                <input type="hidden" name="coid" value="">
                <input type="text" name="contactName" class="form-control"
                       placeholder="请输入联系人姓名">
            </div>
        </div>
        <div class="form-group col-md-6">
            <label class="col-md-4 control-label">联系电话<span class="text-danger">*</span></label>
            <div class="col-md-8">
                <input type="text" name="cphone" class="form-control"
                       placeholder="请输入联系人电话">
            </div>
        </div>

        <div class="form-group col-md-6">
            <label class="col-md-4 control-label">职位</label>
            <div class="col-md-8">
                <input type="text" name="job" class="form-control"
                       placeholder="请输入职位信息">
            </div>
        </div>
        <div class="form-group col-md-6">
            <label class="col-md-4 control-label">电子邮箱</label>
            <div class="col-md-8">
                <input type="text" name="cemail" class="form-control"
                       placeholder="请输入邮箱">
            </div>
        </div>

        <div class="form-group col-md-6">
            <label class="col-md-4 control-label">联系地址</label>
            <div class="col-md-8">
                <input type="text" name="caddress" class="form-control"
                       placeholder="请输入联系地址">
            </div>
        </div>

        <div class="form-group col-md-6">
            <label for="czipcode" class="col-md-4 control-label">联系人邮编</label>
            <div class="col-md-8">
                <input type="text" name="czipcode" class="form-control"
                       placeholder="请输入联系人邮编">
            </div>
        </div>

        <div class="form-group col-md-6">
            <label class="col-md-4 control-label">操作</label>
            <div class="col-md-8">
                <button type="button" class="btn btn-danger btn-sm delete-contact">删除此联系人</button>
            </div>
        </div>
        <hr class="col-md-12">
    </div>
</div>

<!-- 模态框提示 -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body" id="alertMessage"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">


    $(function () {
        // 初始化联系人索引（基于已有联系人数）
        var contactIndex = ${contacts != null ? contacts.size() : 0};

        // 添加新联系人
        $("#addContactBtn").click(function () {
            $("#contactsTitle").show();
            var template = $("#contactTemplate").html()
                .replace(/{index}/g, contactIndex);
            $("#contactsList").append(template);
            contactIndex++;

            // 绑定删除事件
            bindDeleteEvent();
            // 添加验证规则
            initValidatorForNewContact();
        });

        // 绑定删除联系人事件
        function bindDeleteEvent() {
            $(".delete-contact").off("click").on("click", function () {
                $(this).closest(".contact-item").remove();
                if ($("#contactsList .contact-item").length === 0) {
                    $("#contactsTitle").hide();
                }
            });
        }

        // 初始化删除事件
        bindDeleteEvent();

        // 表单验证（同添加页面逻辑）
        var validator = $("#myform").bootstrapValidator({
            message: "输入值无效",
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                customerName: {
                    validators: {
                        notEmpty: {message: "客户名称不能为空"}
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {message: "客户电话不能为空"},
                        regexp: {
                            regexp: /^(0\d{2,3}-\d{7,8})|(1[3-9]\d{9})$/,
                            message: "请输入正确的电话格式"
                        }
                    }
                }
            }
        });

        // 为新增联系人添加验证
        function initValidatorForNewContact() {
            validator.bootstrapValidator("addField", "contacts[" + (contactIndex - 1) + "].contactName", {
                validators: {
                    notEmpty: {message: "联系人姓名不能为空"}
                }
            });
            validator.bootstrapValidator("addField", "contacts[" + (contactIndex - 1) + "].cphone", {
                validators: {
                    notEmpty: {message: "联系人电话不能为空"},
                    regexp: {
                        regexp: /^(0\d{2,3}-\d{7,8})|(1[3-9]\d{9})$/,
                        message: "请输入正确的电话格式"
                    }
                }
            });
        }

        // 重置按钮事件
        $("button[type='reset']").click(function () {
            validator.bootstrapValidator("resetForm", true);
        });

        // AJAX错误处理
        $(document).ajaxError(function (event, xhr) {
            if (xhr.status === 403) {
                window.location.href = xhr.getResponseHeader("url");
            } else if (xhr.status !== 200) {
                $("#alertMessage").text("服务器异常，请稍后重试");
                $("#alertModal").modal("show");
            }
        });
    });
</script>
</body>
</html>